<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <i :class="evaIcon"></i>
        <span> {{ evaType }}</span>
      </div>
      <div v-for="item in showList" :key="item.evaluateid" class="text item">
        <EvaluationCard
          :brief="item.brief"
          :cover="item.cover"
          :createdate="item.createdate"
          :evacount="item.evacount"
          :evaluateid="item.evaluateid"
          :evareplycount="item.evareplycount"
          :title="item.title"
          :topiccount="item.topiccount"
          :type="item.type"
        ></EvaluationCard>
        <el-divider></el-divider>
      </div>
      <!-- 分页 -->
      <el-pagination
        class="consult-pagination"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="list.length"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import EvaluationCard from "./EvaluationCard.vue";
export default {
  created() {
    this.getEvaluateListByType();
  },
  props: ["evaluationType"],
  components: {
    EvaluationCard,
  },
  data() {
    return {
      evaIcon: "el-icon-star-off",
      currentPage: 1,
      pageSize: 5,
      totalEvaluation: 100,
      list: [], //测试列表
    };
  },
  methods: {
    //根据类型获取测试列表
    getEvaluateListByType() {
      this.$request.getHttp({
        url: "/evaluate/getEvaluateListByType",
        params: { type: this.evaluationType },
        success: (data) => {
          if (data.code == 200) {
            this.list = data.list;
          }
        },
        error: (error) => {},
      });
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
  },
  computed: {
    //显示当前页的列表
    showList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.list.slice(start, end);
    },
    evaType() {
      // 根据evaluationType
      // 1-情感， 2-性格，3-健康，4-职场，5-人际 ，6-能力
      if (this.evaluationType == 1) {
        this.evaIcon = "el-icon-ali-qingganfenxi";
        return "情感";
      } else if (this.evaluationType == 2) {
        this.evaIcon = "el-icon-ali-zhiyexinggeceping";
        return "性格";
      } else if (this.evaluationType == 3) {
        this.evaIcon = "el-icon-ali-jiankangdanganx";
        return "健康";
      } else if (this.evaluationType == 4) {
        this.evaIcon = "el-icon-ali-ziyuan23";
        return "职场";
      } else if (this.evaluationType == 5) {
        this.evaIcon = "el-icon-ali-renji";
        return "人际";
      } else if (this.evaluationType == 6) {
        this.evaIcon = "el-icon-ali-nengli";
        return "能力";
      } else {
        this.evaIcon = "el-icon-ali-qingganfenxi";
        return "情感";
      }
    },
  },
};
</script>

<style scoped>
.box-card {
  overflow-y: auto;
  max-height: 100vh;
  scrollbar-width: thin; /* 隐藏Firefox上的滚动条 */
  scrollbar-color: transparent transparent; /* 隐藏Firefox上的滚动条 */
}

.box-card::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}

.box-card::-webkit-scrollbar-thumb {
  background-color: transparent; /* 将滚动条拖动块颜色设置为透明 */
}

.box-card::-webkit-scrollbar-track {
  background-color: transparent; /* 将滚动条轨道颜色设置为透明 */
}
</style>